<template>
  <div id="team">
    <van-search
        v-model="searchKeyWord"
        shape="round"
        background="#00bef8"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
    >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
    <van-tabs v-model:active="activeName" @change="onTabChange" style="margin-bottom: 5px">
      <van-tab title="公开队伍" name="0"></van-tab>
      <van-tab title="私有队伍" name="1"></van-tab>
      <van-tab title="加密队伍" name="2"></van-tab>
    </van-tabs>
    <van-floating-bubble
        axis="xy"
        icon="plus"
        magnetic="x"
        @click="doJoinTeam"
    />
    <team-card-list :team-list="joinTeamList"/>
    <van-empty v-if="!joinTeamList || joinTeamList.length < 1" image="search" description="暂无加入队伍" />
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import TeamCardList from "../../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import request from "../../plugins/request.ts";

const router = useRouter()
const joinTeamList = ref([]);
const activeName = ref('0');
const status = ref(0)
const pageNum = ref(1);
// 页面加载时，向后端请求数据
onMounted( () => {
  getJoinTeamList()
})

const getJoinTeamList = async (val = '', status = 0) => {
  const result = await request.get("/team/list/my/join", {
    params: {
      searchText: val,
      pageNum: 1,
      "status": status,
    }
  });
  if (result?.data.code === 200 && result.data.data) {
    joinTeamList.value = result.data.data;
  } else {
    showFailToast('队伍加载失败，请刷新重试' + result.data.description);
  }
}
const searchKeyWord = ref('');
const onTabChange = (name: any) => {
  status.value = +name;
  pageNum.value = 1;
  getJoinTeamList(searchKeyWord.value, +name);
}
const onSearch = () => {
  getJoinTeamList(searchKeyWord.value)
};
const onClickButton = () => {
  getJoinTeamList(searchKeyWord.value)
}
const doJoinTeam = () => {
  router.push({
    path: "/team/add",
  })
}

</script>

<style scoped>

</style>